canvas.js ➔ prepareCanvas - Code Metrics - Inspection of "Refactoring" - lindell/JsBarcode - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — master (#79)

by Johan

created 2016-06-29 19:58 UTC

canvas.js ➔ prepareCanvas C

↳ Parent: src/renderers/canvas.js

Complexity

Conditions	11
Paths	22

Size

Total Lines

Duplication

Lines	38
Ratio	62.3 %

Importance

Changes	4
Bugs	0	Features	0

Metric	Value
cc	11
c	4
b	0
f	0
nc	22
nop	3
dl	38
loc	61
rs	6.2318

How to fix Long Method Complexity

import merge from "../help/merge.js";
import {calculateEncodingAttributes, getTotalWidthOfEncodings, getMaximumHeightOfEncodings} from "./shared.js";

class CanvasRenderer{

	constructor(canvas, encodings, options){
		this.canvas = canvas;
		this.encodings = encodings;
		this.options = options;
	}

	render(){
		// Abort if the browser does not support HTML5 canvas
		if (!this.canvas.getContext) {
			throw new Error('The browser does not support canvas.');
		}

		this.prepareCanvas();
		for(let i = 0; i < this.encodings.length; i++){
			var encodingOptions = merge(this.options, this.encodings[i].options);

			this.drawCanvasBarcode(encodingOptions, this.encodings[i]);
			this.drawCanvasText(encodingOptions, this.encodings[i]);

			this.moveCanvasDrawing(this.encodings[i]);
		}

		this.restoreCanvas();
	}

	prepareCanvas(){
		// Get the canvas context
		var ctx = this.canvas.getContext("2d");

		ctx.save();

		calculateEncodingAttributes(this.encodings, this.options, ctx);
		var totalWidth = getTotalWidthOfEncodings(this.encodings);
		var maxHeight = getMaximumHeightOfEncodings(this.encodings);

		this.canvas.width = totalWidth + this.options.marginLeft + this.options.marginRight;

		this.canvas.height = maxHeight;

		// Paint the canvas
		ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
		if(this.options.background){
			ctx.fillStyle = this.options.background;
			ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
		}

		ctx.translate(this.options.marginLeft, 0);
	}

	drawCanvasBarcode(options, encoding){
		// Get the canvas context
		var ctx = this.canvas.getContext("2d");

		var binary = encoding.data;

		// Creates the barcode out of the encoded binary
		var yFrom;
		if(options.textPosition == "top"){
			yFrom = options.marginTop + options.fontSize + options.textMargin;
		}
		else{
			yFrom = options.marginTop;
		}

		ctx.fillStyle = options.lineColor;

		for(var b = 0; b < binary.length; b++){
			var x = b * options.width + encoding.barcodePadding;

			if(binary[b] === "1"){
				ctx.fillRect(x, yFrom, options.width, options.height);
			}
			else if(binary[b]){
				ctx.fillRect(x, yFrom, options.width, options.height * binary[b]);
			}
		}
	}

	drawCanvasText(options, encoding){
		// Get the canvas context
		var ctx = this.canvas.getContext("2d");

		var font = options.fontOptions + " " + options.fontSize + "px " + options.font;

		// Draw the text if displayValue is set
		if(options.displayValue){
			var x, y;

			if(options.textPosition == "top"){
				y = options.marginTop + options.fontSize - options.textMargin;
			}
			else{
				y = options.height + options.textMargin + options.marginTop + options.fontSize;
			}

			ctx.font = font;

			// Draw the text in the correct X depending on the textAlign option
			if(options.textAlign == "left" || encoding.barcodePadding > 0){
				x = 0;
				ctx.textAlign = 'left';
			}
			else if(options.textAlign == "right"){
				x = encoding.width - 1;
				ctx.textAlign = 'right';
			}
			// In all other cases, center the text
			else{
				x = encoding.width / 2;
				ctx.textAlign = 'center';
			}

			ctx.fillText(encoding.text, x, y);
		}
	}



	moveCanvasDrawing(encoding){
		var ctx = this.canvas.getContext("2d");

		ctx.translate(encoding.width, 0);
	}

	restoreCanvas(){
		// Get the canvas context
		var ctx = this.canvas.getContext("2d");

		ctx.restore();
	}
}

export default CanvasRenderer;


1		import merge from "../help/merge.js";
2		import {calculateEncodingAttributes, getTotalWidthOfEncodings, getMaximumHeightOfEncodings} from "./shared.js";
3
4	View Code Duplication	class CanvasRenderer{
		0 ignored issues – show Duplication introduced 2016-06-29 16:30 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
5		constructor(canvas, encodings, options){
6		this.canvas = canvas;
7		this.encodings = encodings;
8		this.options = options;
9		}
10
11		render(){
12		// Abort if the browser does not support HTML5 canvas
13		if (!this.canvas.getContext) {
14		throw new Error('The browser does not support canvas.');
15		}
16
17		this.prepareCanvas();
18		for(let i = 0; i < this.encodings.length; i++){
19		var encodingOptions = merge(this.options, this.encodings[i].options);
20
21		this.drawCanvasBarcode(encodingOptions, this.encodings[i]);
22		this.drawCanvasText(encodingOptions, this.encodings[i]);
23
24		this.moveCanvasDrawing(this.encodings[i]);
25		}
26
27		this.restoreCanvas();
28		}
29
30		prepareCanvas(){
31		// Get the canvas context
32		var ctx = this.canvas.getContext("2d");
33
34		ctx.save();
35
36		calculateEncodingAttributes(this.encodings, this.options, ctx);
37		var totalWidth = getTotalWidthOfEncodings(this.encodings);
38		var maxHeight = getMaximumHeightOfEncodings(this.encodings);
39
40		this.canvas.width = totalWidth + this.options.marginLeft + this.options.marginRight;
41
42		this.canvas.height = maxHeight;
43
44		// Paint the canvas
45		ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
46		if(this.options.background){
47		ctx.fillStyle = this.options.background;
48		ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
49		}
50
51		ctx.translate(this.options.marginLeft, 0);
52		}
53
54		drawCanvasBarcode(options, encoding){
55		// Get the canvas context
56		var ctx = this.canvas.getContext("2d");
57
58		var binary = encoding.data;
59
60		// Creates the barcode out of the encoded binary
61		var yFrom;
62		if(options.textPosition == "top"){
63		yFrom = options.marginTop + options.fontSize + options.textMargin;
64		}
65		else{
66		yFrom = options.marginTop;
67		}
68
69		ctx.fillStyle = options.lineColor;
70
71		for(var b = 0; b < binary.length; b++){
72		var x = b * options.width + encoding.barcodePadding;
73
74		if(binary[b] === "1"){
75		ctx.fillRect(x, yFrom, options.width, options.height);
76		}
77		else if(binary[b]){
78		ctx.fillRect(x, yFrom, options.width, options.height * binary[b]);
79		}
80		}
81		}
82
83		drawCanvasText(options, encoding){
84		// Get the canvas context
85		var ctx = this.canvas.getContext("2d");
86
87		var font = options.fontOptions + " " + options.fontSize + "px " + options.font;
88
89		// Draw the text if displayValue is set
90		if(options.displayValue){
91		var x, y;
92
93		if(options.textPosition == "top"){
94		y = options.marginTop + options.fontSize - options.textMargin;
95		}
96		else{
97		y = options.height + options.textMargin + options.marginTop + options.fontSize;
98		}
99
100		ctx.font = font;
101
102		// Draw the text in the correct X depending on the textAlign option
103		if(options.textAlign == "left" \|\| encoding.barcodePadding > 0){
104		x = 0;
105		ctx.textAlign = 'left';
106		}
107		else if(options.textAlign == "right"){
108		x = encoding.width - 1;
109		ctx.textAlign = 'right';
110		}
111		// In all other cases, center the text
112		else{
113		x = encoding.width / 2;
114		ctx.textAlign = 'center';
115		}
116
117		ctx.fillText(encoding.text, x, y);
118		}
119		}
120
121
122
123		moveCanvasDrawing(encoding){
124		var ctx = this.canvas.getContext("2d");
125
126		ctx.translate(encoding.width, 0);
127		}
128
129		restoreCanvas(){
130		// Get the canvas context
131		var ctx = this.canvas.getContext("2d");
132
133		ctx.restore();
134		}
135		}
136
137		export default CanvasRenderer;
138

lindell / JsBarcode

Pull Request — master (#79)

canvas.js ➔ prepareCanvas C

Complexity

Size

Duplication

Importance

How to fix Long Method Complexity

Long Method

Complexity

Duplication Side-by-Side

Filter issues like